<template>
  <view>
    <view class="picker-tap" @click="open">
      <text class="value-text" :style="{ color: pickerValue ? 'rgba(0,0,0,0.80)' : placeholderColor, fontSize: '30rpx' }">{{ pickerValue || placeholder }}</text>
      <slot name="arrow">
        <view v-if="showArrow" class="arrow-icon" :style="{ boxShadow: `-4rpx 4rpx 0 0rpx ${arrowColor} inset` }" />
      </slot>
    </view>
    <view v-if="showPicker" class="picker-modal"></view>
    <view v-if="showPicker" class="picker-content" :style="{ transform: showPicker ? 'translateY(0)' : 'translateY(100%)' }">
      <view class="picker-header">
        <view v-if="cancelType === 'text'" :style="{ color: cancelColor, fontSize: cancelFontSize, fontWeight: cancelFontWeight }" @click="close">取消</view>
        <icon v-else type="clear" size="18" @click="close" />
        <view class="packer-title" :style="{ color: titleColor, fontSize: titleFontSize, fontWeight: titleFontWeight }">{{ title }}</view>
        <view :style="{ color: confirmColor, fontSize: confirmFontSize, fontWeight: confirmFontWeight }" @click="confirmPicker">确定</view>
      </view>
      <picker-view indicator-style="height: 90rpx;" class="picker-view" :value="data.value" @change="changePicker">
        <picker-view-column >
          <view v-for="(item, index) in data.province" :key="index" class="picker-item" :style="{ fontSize: itemFontSize }" >{{ item.value }}</view>
        </picker-view-column>
        <picker-view-column>
          <view v-for="(item, index) in data.city" :key="index" class="picker-item" :style="{ fontSize: itemFontSize }">{{ item.value }}</view>
        </picker-view-column>
        <picker-view-column v-if="props.isShowArea">
          <view v-for="(item, index) in data.area" :key="index" class="picker-item" :style="{ fontSize: itemFontSize }">{{ item.value }}</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import AllAddress from './data.js'
/**
 * 示例 <pickerAddress class="picker" title="选择城市" style="width: 100%;" :is-show-area='false' @change="handleChange" />
 * */
const emit = defineEmits(['change', 'update:value'])
const props = withDefaults(defineProps<Props>(), {
  isShowArea: true,
  value: '',
  placeholder: '请选择城市',
  placeholderColor: 'rgba(0,0,0,0.25)',
  cancelColor: 'rgba(0,0,0,0.40)',
  cancelType: 'text',
  cancelFontSize: '28rpx',
  cancelFontWeight: 400,
  title: '',
  titleColor: 'rgba(0,0,0,0.80)',
  titleFontSize: '32rpx',
  titleFontWeight: 500,
  confirmColor: '#C70E2D',
  confirmFontSize: '28rpx',
  confirmFontWeight: 400,
  itemFontSize: '32rpx',
  showArrow: true,
  arrowColor: 'rgba(0,0,0,0.25)'
  // pickerList: [{ value: '选项1', code: '1' }]
})

interface Props {
  isShowArea?: boolean //是否显示区
  value: any
  placeholder?: string
  placeholderColor?: string
  cancelColor?: string // 取消按钮颜色
  cancelType?: string // text显示文字，icon显示图片
  cancelFontSize?: string // 取消文字大小
  cancelFontWeight?: number // 取消文字的字体粗细
  title?: string // 标题文字
  titleColor?: string // 标题文字颜色
  titleFontSize?: string // 标题文字大小
  titleFontWeight?: number // 标题文字的字体粗细
  confirmColor?: string // 确定按钮颜色
  confirmFontSize?: string // 确定文字大小
  confirmFontWeight?: number // 确定按钮的字体粗细
  itemFontSize?: string // 选项文字大小
  showArrow?: boolean
  arrowColor?: string
  // pickerList: any // 数据源
}

// 显示隐藏
const showPicker = ref(false)
const pickerValue = ref('')

const data: any = reactive({
  value: {},
  indexArr: [0, 0, 0],
  cityIndex: 0,
  areaIndex: 0,
  province: AllAddress,
  city: [],
  area: []
})

watchEffect(() => {
  pickerValue.value = props.value
})

onMounted(() => {
  data.cityIndex = 0
  data.areaIndex = 0
  data.indexArr = [0, 0, 0]
  // 初始化为第一条数据
  data.city = data.province[data.cityIndex].children
  data.area = data.city[data.areaIndex].children
})

// 滚动触发
const changePicker = (e) => {
  data.indexArr = e.detail.value
  data.cityIndex = e.detail.value[0]
  data.areaIndex = e.detail.value[1]
  data.city = data.province[data.cityIndex].children
  data.area = data.city[data.areaIndex].children
}

// 确认
const confirmPicker = () => {
  showPicker.value = false
  // 确认数据
  if (props.isShowArea) {
    data.value = {
      province: {
        code: data.province[data.indexArr[0]].code,
        value: data.province[data.indexArr[0]].value
      },
      city: {
        code: data.city[data.indexArr[1]].code,
        value: data.city[data.indexArr[1]].value
      },
      area: {
        code: data.area[data.indexArr[2]].code,
        value: data.area[data.indexArr[2]].value
      },
      indexArr: data.indexArr
    }
    pickerValue.value = `${data.value.province.value}${data.value.city.value}${data.value.area.value}`
  } else {
    data.value = {
      province: {
        code: data.province[data.indexArr[0]].code,
        value: data.province[data.indexArr[0]].value
      },
      city: {
        code: data.city[data.indexArr[1]].code,
        value: data.city[data.indexArr[1]].value
      },
      indexArr: data.indexArr
    }
    pickerValue.value = `${data.value.province.value}${data.value.city.value}`
  }
  // 传递数据父组件
  emit('change', data.value)
  emit('update:value', pickerValue.value)

  // 重新初始化
  data.cityIndex = 0
  data.areaIndex = 0
  data.indexArr = [0, 0, 0]
}

// 打开
const open = () => {
  data.cityIndex = 0
  data.areaIndex = 0
  data.indexArr = [0, 0, 0]

  showPicker.value = true
  data.city = data.province[data.cityIndex].children
  data.area = data.city[data.areaIndex].children
}

// 关闭
const close = () => {
  data.cityIndex = 0
  data.areaIndex = 0
  data.indexArr = [0, 0, 0]

  showPicker.value = false
}
</script>

<style lang="scss" scoped>
.picker-tap {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.value-text {
  flex: 1;
}
.arrow-icon {
  margin-left: 20rpx;
  margin-right: 8rpx;
  width: 24rpx;
  height: 24rpx;
  transform: rotate(45deg);
}
.picker-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.4);
  animation: dropdown1 0.2s linear;
}
.picker-content {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2048;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  background-color: #fff;
  transition: all 0.3s;
  animation: dropdown 0.2s linear;
}
.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 20rpx;
  padding: 20rpx 0;
}
.packer-title {
  text-align: center;
}
.picker-view {
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  height: 490rpx;
  background-color: rgba(255, 255, 255, 1);
}
.picker-item {
  line-height: 70rpx;
  text-overflow: ellipsis;
  text-align: center;
}
@keyframes dropdown {
  0% {
    height: 0;
  }
  100% {
    height: 490rpx;
  }
}
@keyframes dropdown1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
